<script setup lang="ts">
import { ref, reactive, onUnmounted } from 'vue';

// 素材列表状态：存储文件信息及预览URL
const materials = ref<Array<{ id: string; file: File; type: 'video' | 'audio' | 'image'; previewUrl: string }>>([]);

// 处理文件上传
const handleFileUpload = (e: Event) => {
  const files = (e.target as HTMLInputElement).files;
  if (!files) return;

  Array.from(files).forEach(file => {
    const type = file.type.split('/')[0] as 'video' | 'audio' | 'image';
    if (!['video', 'audio', 'image'].includes(type)) {
      alert(`不支持的文件类型：${file.type}`);
      return;
    }

    const previewUrl = URL.createObjectURL(file);
    materials.value.push({
      id: Date.now().toString(),
      file,
      type,
      previewUrl
    });
  });
};

// 销毁时释放URL对象
onUnmounted(() => {
  materials.value.forEach(material => {
    URL.revokeObjectURL(material.previewUrl);
  });
});

const handleDeleteMaterial = async (materialId) => {
  if (confirm('删除素材会同时移除时间轴中的相关片段，确定继续？')) {
    // 删除本地素材
    materials.value = materials.value.filter(m => m.id !== materialId);
    
    // 通知父组件更新轨道数据
    emits('material-deleted', materialId);
    
    // 清理预览状态
    if (currentPreview.value?.id === materialId) {
      currentPreview.value = null;
    }
  }
};
</script>

<template>
  <div class="material-manager">
    <div class="upload-section">
      <label class="upload-btn" for="file-upload">
        点击或拖拽文件上传
      </label>
      <input
        type="file"
        id="file-upload"
        multiple
        accept="video/*, audio/*, image/*"
        @change="handleFileUpload"
      />
    </div>

    <div class="material-list">
      <div class="material-item" v-for="material in materials" :key="material.id">
        <div class="preview">
          <template v-if="material.type === 'video'">
            <video :src="material.previewUrl" controls width="120" height="90" muted></video>
          </template>
          <template v-else-if="material.type === 'image'">
            <img :src="material.previewUrl" alt="素材预览" width="120" height="90">
          </template>
          <template v-else-if="material.type === 'audio'">
            <audio :src="material.previewUrl" controls width="120"></audio>
          </template>
        </div>
        <div class="file-info">
          <p class="file-name">{{ material.file.name }}</p>
          <p class="file-size">{{ (material.file.size / 1024 / 1024).toFixed(2) }}MB</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.material-manager {
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  height: calc(100vh - 40px);
  overflow-y: auto;
}
.upload-section {
  margin-bottom: 24px;
}
.upload-btn {
  display: block;
  padding: 12px 24px;
  background: #646cff;
  color: white;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: background 200ms;
}
.upload-btn:hover {
  background: #535bf2;
}
#file-upload {
  display: none;
}
.material-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.material-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}
.preview {
  margin-bottom: 8px;
}
.file-name {
  font-size: 12px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-size {
  font-size: 10px;
  color: #6b7280;
}
</style>